import React, { useState, createContext, useContext, useMemo } from "react";

function ChildComponent1({num,children}) {
  function changeNum1(){
    console.log(`ChildComponent1的数值为${num}`);
    return `Num1的数值为${num}`
  }
  const actionNum1 = useMemo(()=>changeNum1(),[num]) 
  return (
    <>
    <h2>父组件</h2>
    <div>{actionNum1}</div>
    <div>{children}</div>
    </>
  )
}

function ChildComponent2(props:any){
  function changeNum2(){
    console.log(`ChildComponent2的数值为${props.value}`);
    return `Num2的数值为${props.value}`
  }

  // 返回值的类型由箭头函数中return的函数的返回值决定
  const actionNum2 = useMemo(()=>{return changeNum2() },[props.value]) 
  return (
    <>
    <h2>子组件</h2>
    <div>{actionNum2}</div>
    </>
  )
}

function App() {
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(1);
  return (
    <>
    <button onClick={()=>{setNum1(num1+1)}}>num1+1</button>
    <button onClick={()=>{setNum2(num2+1)}}>num2+1</button>
    <ChildComponent1 num={num1}>
      <ChildComponent2 value={num2}/>
    </ChildComponent1>
    </>
  );
}
export default App;
